<template>
	<view class="configuration">
		<view class="top-box">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>财务</el-breadcrumb-item>
				<el-breadcrumb-item>{{ getBreadcrumb }}</el-breadcrumb-item>
			</el-breadcrumb>
			
			<view class="header-serch flex ac jcsb">
				<view class="search-box flex ac">
					<view class="search flex ac">
						<view class="search-title">{{ second? '提现单号':'公司名称' }}：</view>
						<el-input v-model="name" :placeholder="second? '请输入提现单号':'请输入公司名称'"></el-input>
					</view>
					<view class="search flex ac ml24">
						<view class="search-title">{{ second? '提现状态':'认证状态' }}：</view>
						<el-select v-model="value" placeholder="请选择" v-if="!second">
							<el-option
							  v-for="t in selectArr"
							  :key="t.value"
							  :label="t.label"
							  :value="t.value">
							</el-option>
						</el-select>
						<el-select v-model="value" placeholder="请选择" v-if="second">
							<el-option
							  v-for="t in selectArr2"
							  :key="t.value"
							  :label="t.label"
							  :value="t.value">
							</el-option>
						</el-select>
					</view>
					<view class="search-btn">
						<el-button type="primary" class="search-button" @click='search'>查询</el-button>
					</view>
				</view>
				<!-- <el-button class="add-user" type="primary" @click='openDelog(0)'>+ 新增二维码</el-button> -->
			</view>
			
			<el-table 
				:data="Table.TableDataList" 
				style="width: 100%;" 
				height="calc(100vh - 298px)"
				stripe
				:header-cell-style="{background:'#E9ECEE',color:'#16171F'}">
				<el-table-column 
					show-overflow-tooltip 
					:prop="item.prop" 
					:label="item.label" 
					v-for="(item,index) in newTitleList"
					:key="index"
					:min-width="item.width">
					<template slot-scope="scope">
						<!-- 每一项的值 -->
						<span v-if="item.prop && item.prop != 'certificationStatus' && item.prop != 'amountStatus'">{{ item.prop == 'createTime'? new Date(scope.row[item.prop]).format():(item.prop == 'isReturn'? (scope.row[item.prop] == 0? '是':'否'):scope.row[item.prop]) }}</span>
						<!--  财务认证 状态 -->
						<span v-if="item.prop && item.prop == 'certificationStatus'" :class="{ 'yes': !scope.row[item.prop], 'no': scope.row[item.prop] == 1, 'wait': scope.row[item.prop] == 2 }">{{ getStatusTitle(scope.row[item.prop], 0) }}</span>
						<!-- 提现审核 状态 -->
						<span v-if="item.prop && item.prop == 'amountStatus'" :class="{ 'yes': (scope.row[item.prop] == 1 || scope.row[item.prop] == 4), 'no': scope.row[item.prop] == 3, 'wait': scope.row[item.prop] == 2 }">{{ getStatusTitle(scope.row[item.prop], 1) }}</span>
						
						
						<!-- 操作项 -->
						<view v-if="!item.prop && !second">
							<el-button class="start-color" @click="openDelog(0, scope.row)" type="text" size="small" :disabled="scope.row['certificationStatus'] != 2" :class="{ 'color-ccc': scope.row['certificationStatus'] != 2 }">审核</el-button>
							<el-button class="start-color" @click="downloadClick(0, scope.row)" type="text" size="small">下载执照</el-button>
							<el-button class="start-color" @click="downloadClick(1, scope.row)" type="text" size="small">下载证明</el-button>
						</view>
						<view v-if="!item.prop && second == 1">
							<el-button class="start-color" @click="openDelog(1, scope.row)" type="text" size="small" :disabled="(scope.row['amountStatus'] != 2) && (scope.row['amountStatus'] != 1)" :class="{ 'color-ccc': scope.row['amountStatus'] != 2 && scope.row['amountStatus'] != 1 }">{{ scope.row['amountStatus'] == 1? '续审':'审核' }}</el-button>
							<el-button class="start-color" @click="downloadClick(2, scope.row)" type="text" size="small">发票下载</el-button>
						</view>
					</template>
				</el-table-column>
			</el-table>
		</view>
		<view class="footer">
			<el-pagination  
				@size-change="handleSizeChange" 
				@current-change="handleCurrentChange"
				:current-page="Table.page"  
				layout="total, prev, pager, next, jumper, sizes" 
				background 
				:total="Table.count"
				:page-sizes="[10, 12]" 
				:page-size.sync="Table.limit">
			</el-pagination>
			<view class="pageLimit">当前显示{{Table.limit}}条/页</view>
		</view>
		
		<!-- <confirm @confirmFlagClick="confirmFlagClick" :confirmFlag="confirmFlag" :title="confirmTitle"></confirm> -->
		<financeDialog :dialogVisible="addUserDialogFlag" @closeDialog="closeDialog" :title="addDialogTitle" :item="currentFinance" :second="second"></financeDialog>
	</view>
</template>

<script>
	import { Request } from '../model/request.js'
	import { Util } from '../utils/util.js'
	import { config } from '../api/config.js'
	
	// import confirm from './dialog/confirm.vue'
	import financeDialog from './dialog/financeDialog.vue'
	 
	export default {
		components: { financeDialog },
		
		props: {
			second: {
				type: [String, Number],
				default: 0
			}
		},
		
		computed: {
			getBreadcrumb() {
				let c = '财务认证审核'
				if (this.second == 1) {
					c = '提现审核'
				} 
				return c
			},
			
			newTitleList() {
				if (this.second == 1) {
					return this.Table.titleList1
				} else {
					return this.Table.titleList
				}
			}
		},
		
		data() {
			return {
				name: '',
				selectArr: [
					{
					  value: '',
					  label: '全部'
					}, {
					  value: '0',
					  label: '审核通过'
					}, {
					  value: '1',
					  label: '审核拒绝'
					}, {
						value: '2',
						label: '待审核'
					}
				],
				value: '',
				selectArr2: [
					{
					  value: '',
					  label: '全部'
					}, {
					  value: '1',
					  label: '审核通过'
					}, {
						value: '3',
						label: '审核拒绝'
					}, {
					  value: '2',
					  label: '待审核'
					}, {
						value: '4',
						label: '已打款'
					}
				],
				Table: {
					titleList: [{
							prop: "companyName",
							label: "公司名称"
						},
						{
							prop: "companyAddress",
							label: "公司地址"
						},
						{
							prop: "bankAddress",
							label: "开户行地址"
						},
						{
							prop: "bankName",
							label: "开户行名称"
						},
						{
							prop: "bankNumber",
							label: "银行卡号"
						},
						{
							prop: "certificationStatus",
							label: "认证状态"
						},
						{
							prop: "createTime",
							label: "申请时间"
						},
						{
							label: "操作",
							width: '140px'
						}
					],
					titleList1: [{
							prop: "orderNumber",
							label: "提现单号"
						},
						{
							prop: "contactPerson",
							label: "联系人"
						},
						{
							prop: "contactPhone",
							label: "联系电话"
						},
						{
							prop: "payCompany",
							label: "支付公司"
						},
						{
							prop: "returnAddress",
							label: "发票邮寄地址"
						},
						{
							prop: "isReturn",
							label: "是否需要回寄发票"
						},
						{
							prop: "amount",
							label: "提现金额"
						},
						{
							prop: "amountStatus",
							label: "提现状态"
						},
						{
							prop: "createTime",
							label: "申请时间"
						},
						{
							label: "操作",
							width: '110px'
						}
					],
					TableDataList: [],
					result: '',
					page: 1,
					limit: 10,
					count: 0
				},
				
				addUserDialogFlag: false,
				addDialogTitle: '',
				currentFinance: {}
			}
		},
		
		mounted() {
			this.initTable()
		},
		
		watch: {
			second(newVal, oldVal) {
				this.name = ''
				this.value = ''
				this.Table.page = 1
				this.Table.limit = 10
				this.Table.count = 0
				this.initTable()
			},
			value() {
				this.initTable()
			}
		},
		
		methods: {
			getStatusTitle(i, index) {
				if (index) {
					if (i == 1) {
						return '审核通过'
					} else if (i == 2) {
						return '待审核'
					} else if (i == 3) {
						return '审核拒绝'
					} else {
						return '已打款'
					}
				} else {
					if (i == 1) {
						return '审核拒绝'
					} else if (i == 2) {
						return '待审核'
					} else {
						return '审核通过'
					}
				}
				console.log(i, 'iii')
			},
			
			search() {
				this.initTable()
			},
			
			async initTable(page) {
				this.Table.TableDataList = []
				if (!Util.isNull(page)) {
					this.Table.page = page
				} else {
					this.Table.page = 1
				}
				let res
				if (this.second == 1) {
					res = await Request.WITHDRAWALFINDALL(this.Table.page, this.Table.limit, this.name, this.value)
				} else {
					res = await Request.CERTIFICATIONFIND(this.Table.page, this.Table.limit, this.name, this.value)
				}
				console.log(res, 'resswss')
				if (!Util.isNull(res)) {
					this.Table.TableDataList = res.data.records
					this.Table.count = res.data.total
				} else {
					this.Table.TableDataList = null
				}
			},
			
			// 财务审核 提现审核
			openDelog(i, item=null) {
				if (i) {
					this.addDialogTitle = '提现审核'
				} else {
					this.addDialogTitle = '财务审核'
				}
				this.currentFinance = item
				this.addUserDialogFlag = true
			},
			
			closeDialog(flag) {
				this.addUserDialogFlag = false
				if (typeof flag != 'function' && flag) { // 新增二维码成功
					this.initTable(this.Table.page, this.name)
				}
			},
			
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.initTable()
				// this.name = ''
			},
			
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.initTable(val)
			},
			
			async downloadClick(i, item) {
				if (i == 1) { // 证明
					let x = await Request.FILEDOWNLOAD(item.gatheringProof)
					Util.blobDownload(x, item.companyName + '_证明')
				} else if (i == 2) { // 发票
					let x = await Request.FILEDOWNLOAD(item.invoiceAddress)
					Util.blobDownload(x, item.companyName + '_发票')
				} else { // 执照
					let x = await Request.FILEDOWNLOAD(item.businessLicense)
					Util.blobDownload(x, item.companyName + '_执照')
				}
			},
			
			// loadCode(imgsrc, name) {
			//   let image = new Image();
			//   // 解决跨域 Canvas 污染问题
			//   image.setAttribute("crossOrigin", "anonymous")
			//   image.crossOrigin='Anonymous'
			//   image.onload = function () {
			// 	let canvas = document.createElement("canvas");
			// 	canvas.width = image.width;
			// 	canvas.height = image.height;
			// 	let context = canvas.getContext("2d");
			// 	context.drawImage(image, 0, 0, image.width, image.height);
			// 	let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
			// 	let a = document.createElement("a"); // 生成一个a元素
			// 	let event = new MouseEvent("click"); // 创建一个单击事件
			// 	a.download = name || "code"; // 设置图片名称
			// 	a.href = url; // 将生成的URL设置为a.href属性
			// 	a.dispatchEvent(event); // 触发a的单击事件
			//   }
			//   image.src = imgsrc;
			// }
		}
	}
</script>

<style scoped>
	.configuration {
		/* padding: 20px 40px 50px; */
		position: relative;
	}
	
	.top-box {
		padding: 20px 40px 0;
	}
	
	.header-serch {
		margin: 30px 0;
	}
	
	.search-title {
		min-width: 72px;
		font-size: 14px;
		font-weight: 500;
		color: #16171F;
		text-align: right;
	}
	
	.search-btn {
		margin-left: 30px;
	}
	
	.footer {
		width: 100%;
		height: 40px;
		display: flex;
		align-items: center;
		/* position: absolute; */
		/* left: 0; */
		/* bottom: 0px; */
		justify-content: center;
		height: 130px;
		background: #FFFFFF;
		box-shadow: 0px -7px 9px 0px rgba(0, 0, 0, 0.02);
	}
	
	.del-color {
		color: #D1141F;
	}
	
	.start-color {
		color: #4A92FD;
	}
	
	>>> .el-input__inner {
		height: 32px;
	}
	
	>>> .el-input__icon {
		line-height: 32px;
	}
	
	.search-button, .add-user {
		font-size: 14px;
		height: 32px;
		line-height: 32px;
		padding-top: 0;
		padding-bottom: 0;
	}
	
	.qr-code-box {
		height: 50px;
	}
	
	.tki-qrcode {
		height: 100%;
	}
	
	.yes {
		color: #69BC2E;
	}
	
	.no {
		color: #D1141F;
	}
	
	.wait {
		color: #4A92FD;
	}
	
	.ml24 {
		margin-left: 24px;
	}
	
	.color-ccc {
		color: #ccc;
	}
</style>
